<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ECharts Line Chart with Toggle</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 100%; height: 500px"></div>
    <script>
      const chartDom = document.getElementById("chart");
      const myChart = echarts.init(chartDom);

      // 定义图表选项
      const option = {
        title: {
          text: "Line Chart with Toggle",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "Product A",
            "Product B",
            "Product C",
            "Product D",
            "Product E",
            "Product F",
          ],
        },
        xAxis: {
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Product A",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210, 169, 232, 201, 154, 190],
          },
          {
            name: "Product B",
            type: "line",
            data: [220, 182, 191, 234, 290, 330, 310, 213, 183, 175, 160, 150],
          },
          {
            name: "Product C",
            type: "line",
            data: [150, 232, 201, 154, 190, 330, 410, 320, 302, 274, 300, 260],
          },
          {
            name: "Product D",
            type: "line",
            data: [320, 332, 301, 334, 390, 330, 320, 302, 332, 301, 334, 390],
          },
          {
            name: "Product E",
            type: "line",
            data: [
              820, 932, 901, 934, 1290, 1330, 1320, 1302, 1332, 901, 934, 1290,
            ],
          },
          {
            name: "Product F",
            type: "line",
            data: [520, 632, 601, 634, 790, 730, 710, 702, 732, 601, 634, 790],
          },
        ],
      };

      // 设置图表选项
      myChart.setOption(option);

      // 添加轮询点击效果
      let currentIndex = 0;
      let timer = null;
      const seriesLength = option.series.length;
      const dIndex = option.series[0].data.length;

      function startTimer() {
        timer = setInterval(function () {
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: currentIndex % seriesLength,
            dataIndex: currentIndex % dIndex,
          });
          console.log(currentIndex + 1);
          currentIndex = currentIndex + 1;
          if (currentIndex >= dIndex) {
            currentIndex = 0;
          }
        }, 2000);
      }

      startTimer();

      // 添加鼠标移入移出事件
      chartDom.addEventListener("mouseover", function () {
        clearInterval(timer);
      });
      chartDom.addEventListener("mouseout", function () {
        startTimer();
      });
    </script>
  </body>
</html>
